<template>
  <div style="height:100%;">
    <div id="map" ref="rootmap">

    </div>
    <form class="form-inline">
      <label for="type">Geometry type &nbsp;</label>
      <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
        <option value="Circle">Circle Geometry</option>
        <option value="Geodesic">Geodesic Circle</option>
        <option value="None" selected>None</option>
      </select>
    </form>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
// import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import mapconfig from '../config/mapconfig'
import {
  DragRotateAndZoom,
  defaults as defaultInteractions,
} from 'ol/interaction';
import {Attribution, ScaleLine, FullScreen, Control, defaults as defaultControls} from 'ol/control';
import ZoomSlider from 'ol/control/ZoomSlider';
import {TileDebug, DataTile, Vector as VectorSource} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';


import {Style} from 'ol/style';
import Feature from 'ol/Feature';
import {Circle} from 'ol/geom';


import { getCustomTileLayer } from '../config/tileDebugConfig'
import {
  initVectorLayer,
  getVectorLayer } from '../config/drawGeometryConfig'

import {
  getIconVectorLayer,
  initModifyIconVectorLayer
} from '../config/drawIconConfig'

import {
  getCustomCircleLayer
} from '../config/drawCustomCircleConfig'





class RotateNorthControl extends Control {
  /**
   * @param {Object} [opt_options] Control options.
   */
  constructor(opt_options) {
    const options = opt_options || {};

    const button = document.createElement('button');
    button.innerHTML = 'N';

    const element = document.createElement('div');
    element.className = 'rotate-north ol-unselectable ol-control';
    element.appendChild(button);

    super({
      element: element,
      target: options.target,
    });

    button.addEventListener('click', this.handleRotateNorth.bind(this), false);
  }

  handleRotateNorth() {
    this.getMap().getView().setRotation(0);
  }
}

const attribution = new Attribution({
  collapsible: false,
});





// const attributions =
//   '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
//   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';


export default {
  name:'OLMap',
  data() {
    return {
      map: null
    };
  },
  created() {

  },
  mounted() {
    let mapcontainer = this.$refs.rootmap;
    this.map = new Map({
      // target: "map",
      // layers: [
      //   new TileLayer({
      //     source: new OSM()
      //   })
      // ],
      interactions: defaultInteractions().extend([new DragRotateAndZoom()]), // Shift+Drag  旋转缩放
      controls: defaultControls({attribution: true}).extend([
                attribution, 
                new ZoomSlider(),
                new RotateNorthControl(), 
                new ScaleLine({
                  units: 'metric', // degrees 角度  metric 米
                }),
                new FullScreen(),
              ]), // 定制的【N】控制
      target: document.getElementById('map'),
      layers: [...mapconfig.streetmap(), 
                // getCustomTileLayer(),
                // new VectorLayer({
                //   source: new VectorSource({
                //     features: [circleFeature],
                //   }),
                // }),
                getCustomCircleLayer(),
                // getIconVectorLayer(),
                // getVectorLayer(), // 绘制自定义图形
              ],
      view: new View({
        // projection: "EPSG:4326",    //使用这个坐标系
        center: [mapconfig.x,mapconfig.y],  
        rotation: Math.PI / 20, // 默认旋转角度
        zoom: mapconfig.zoom // 缩放比例，即地理信息显示程度
      })
    });

    initModifyIconVectorLayer(this.map);
    initVectorLayer(this.map);

    window.addEventListener('resize', this.checkSize);
    this.checkSize();
  },
  methods: {
    checkSize() {
      const small = this.map.getSize()[0] < 600;
      attribution.setCollapsible(small);
      attribution.setCollapsed(small);
    }
  }
};



</script>

<style>
#map{height:80%;margin: 30px 20px;}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}
.ol-attribution{
  display: block;
}
/* 【左上角】缩放控制 默认启动缩放操作 */
.ol-zoom {
  display: block;
}
/* 【左下角】缩放控制条 */
.ol-zoomslider{
  /* top: calc(100% - 220px) !important; */
  background-color: #f99494;
  top:auto;
  bottom: 1em;
}
.ol-zoomslider:hover{
  background-color: #f99494;
}

/* 【右下角】GIS比例展示 */
.ol-scale-line{
  left: auto;
  right:8px;
}

.map {
  width: 100%;
  height:400px;
}
.rotate-north {
  top: 65px;
  left: .5em;
}
.ol-touch .rotate-north {
  top: 80px;
}

/* position the rotate control lower than usual */
.ol-rotate {
  top: 3em;
}

</style>